<template>
  <a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
    <div
      style="width: 100%; white-space: nowrap"
      :style="{ textAlign: actionColOpt.style.textAlign }"
    >
      <FormItem>
        <slot name="submitBefore"></slot>
        <Button
          type="primary"
          class="ml-2"
          v-bind="getSubmitBtnOptions"
          @click="submitAction"
          v-if="showSubmitButton"
        >
          <BasicIcon icon="ant-design:search-outlined" />
          {{ getSubmitBtnOptions.text }}
        </Button>
        <slot name="resetBefore"></slot>
        <Button
          type="default"
          class="ml-2"
          v-bind="getResetBtnOptions"
          @click="resetAction"
          v-if="showResetButton"
        >
          <BasicIcon icon="ant-design:reload-outlined" />
          {{ getResetBtnOptions.text }}
        </Button>
        <slot name="advanceBefore"></slot>
        <Button
          type="link"
          size="small"
          class="ml-2"
          style="padding: 0"
          @click="toggleAdvanced"
          v-if="showAdvancedButton && !hideAdvanceBtn"
        >
          {{ isAdvanced ? "收起" : "展开" }}
          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
        </Button>
        <slot name="advanceAfter"></slot>
      </FormItem>
    </div>
  </a-col>
</template>
<script lang="ts">
import type { ColEx } from "../types/index";
//import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
import { defineComponent, computed, PropType } from "vue";
import { Form, Col } from "ant-design-vue";
import { BasicIcon } from "$/components/Icon";
import { Button, ButtonProps } from "$/components/Button";
import { BasicArrow } from "$/components/Basic";
import { useFormContext } from "../hooks/useFormContext";
import { propTypes } from "$/utils/propTypes";

type ButtonOptions = Partial<ButtonProps> & { text: string };

export default defineComponent({
  name: "VbenFormAction",
  components: {
    FormItem: Form.Item,
    BasicIcon,
    Button,
    BasicArrow,
    [Col.name]: Col,
  },
  props: {
    showActionButtonGroup: propTypes.bool.def(true),
    showResetButton: propTypes.bool.def(true),
    showSubmitButton: propTypes.bool.def(true),
    showAdvancedButton: propTypes.bool.def(true),
    resetButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({}),
    },
    submitButtonOptions: {
      type: Object as PropType<ButtonOptions>,
      default: () => ({}),
    },
    actionColOptions: {
      type: Object as PropType<Partial<ColEx>>,
      default: () => ({}),
    },
    actionSpan: propTypes.number.def(6),
    isAdvanced: propTypes.bool,
    hideAdvanceBtn: propTypes.bool,
    baseColProps: {
      type: Object as PropType<Partial<ColEx>>,
    },
  },
  emits: ["toggle-advanced"],
  setup(props, { emit }) {
    const actionColOpt = computed(() => {
      const {
        showAdvancedButton,
        hideAdvanceBtn,
        baseColProps,
        actionColOptions,
      } = props;
      // const { showAdvancedButton, baseColProps, actionSpan: span, actionColOptions } = props;
      // const actionSpan = 24 - span;
      // const advancedSpanObj = showAdvancedButton
      //   ? { span: actionSpan < 6 ? 24 : actionSpan }
      //   : {};
      const actionColOpt: Partial<ColEx> = {
        style: {
          paddingLeft: "20px",
          paddingRight: "22px",
          textAlign: showAdvancedButton && !hideAdvanceBtn ? "right" : "left",
          marginLeft:
            showAdvancedButton && !hideAdvanceBtn ? "auto" : "inherit",
        },
        ...baseColProps,
        // span: showAdvancedButton ? 6 : 4,
        // ...advancedSpanObj,
        ...actionColOptions,
      };
      return actionColOpt;
    });

    const getResetBtnOptions = computed((): ButtonOptions => {
      return Object.assign(
        {
          text: "重置",
        },
        props.resetButtonOptions
      );
    });

    const getSubmitBtnOptions = computed(() => {
      return Object.assign(
        {
          text: "查询",
        },
        props.submitButtonOptions
      );
    });

    function toggleAdvanced() {
      emit("toggle-advanced");
    }

    return {
      actionColOpt,
      getResetBtnOptions,
      getSubmitBtnOptions,
      toggleAdvanced,
      ...useFormContext(),
    };
  },
});
</script>
